<template>
	<view class="child_management">
		<template v-if="childList?.length > 0">
			<view class="child_management_item" v-for="item in childList" :key="item?.id">
				<view class="child_management_item_top">
					<image :src="item?.avatar" v-if="item?.avatar"></image>
					<image src="http://qianxueapplet.suoeryun.com/child.png" v-else></image>
					<text>{{item?.studentName}}</text>
				</view>
				<view class="child_management_item_info">
					<view class="child_management_item_info_col"><text>学校：</text><text>{{item?.schoolName}}</text>
					</view>
					<view class="child_management_item_info_row">
						<view class="child_management_item_info_col"><text>年级：</text><text>{{item?.gradeName}}</text>
						</view>
						<view class="child_management_item_info_col"><text>班级：</text><text>{{item?.gradeName}}</text>
						</view>
					</view>
					<view class="child_management_item_info_row">
						<view class="child_management_item_info_col">
							<text>性别：</text><text>{{item?.sex === '1'?'男':'女'}}</text>
						</view>
						<view class="child_management_item_info_col"><text>年龄：</text><text>{{item?.age}}岁</text>
						</view>
					</view>
					<view class="child_management_item_info_col"><text>身份证号：</text><text>{{item?.idcard}}</text>
					</view>
					<view class="child_management_item_info_col"><text>家长联系电话：</text><text>{{item?.phone}}</text>
					</view>
				</view>
				<view class="child_management_item_btn">
					<view @click="handleEdit(item)">编辑</view>
					<view @click="handleDel(item)">删除</view>
				</view>
			</view>
		</template>
		<image src="http://qianxueapplet.suoeryun.com/listNotData.png"
			class="child_management_not" v-else></image>
		<view class="child_management_btn" @click="handleAdd()">添加孩子信息</view>
	</view>
</template>

<script lang="ts" setup>
	import { queryBindingStudentsList, deleteBindingStudent } from "@/config/mine.api";
	import { ref } from "vue";
	import { onShow } from "@dcloudio/uni-app";

	const childList = ref([]);

	onShow(() => {
		loadData();
	})

	/**
	 * 加载亲子列表
	 */
	async function loadData() {
		const res = await queryBindingStudentsList({});
		childList.value = res;
	}

	/**
	 * 新增
	 */
	function handleAdd() {
		uni.$u.route('pages/mine/parentChildBinding')
	}

	/**
	 * 编辑
	 */
	function handleEdit(item) {
		uni.$u.route('pages/mine/parentChildBinding', { id: item?.id })
	}
	/**
	 * 删除
	 */
	function handleDel(item) {
		uni.showModal({
			title: '提示',
			content: '确认是否删除？',
			confirmColor: '#FF943C',
			success: async function (res) {
				if (res.confirm) {
					uni.showLoading({
						title: '删除中...'
					})
					await deleteBindingStudent({ studentId: item?.id })
					uni.showToast({
						icon: 'none',
						title: '删除成功！'
					});
					loadData();
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.child_management {
		.child_management_item {
			margin: 24rpx 24rpx 0 24rpx;
			border-radius: 16rpx;
			padding: 24rpx 28rpx;
			background-color: #fff;

			.child_management_item_top {
				display: flex;
				align-items: center;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-right: 12rpx;
					border-radius: 50%;
				}

				text {
					font-size: 36rpx;
					font-size: 500;
				}
			}

			.child_management_item_info {
				margin-top: 24rpx;
				background-color: #F5F7F9;
				padding: 24rpx 24rpx 20rpx 24rpx;

				.child_management_item_info_row {
					display: flex;
					justify-content: space-between;

					&>view {
						&:nth-child(1) {
							flex: 0.6
						}

						&:nth-child(2) {
							flex: 0.4
						}
					}
				}

				.child_management_item_info_col {
					// line-height: 60rpx;
					padding-bottom: 15rpx;

					&>text {
						font-size: 24rpx;

						&:first-child {
							color: #828282;
						}

						&:nth-child(2) {}
					}
				}
			}

			.child_management_item_btn {
				display: flex;
				justify-content: flex-end;
				margin-top: 24rpx;

				&>view {
					width: 156rpx;
					height: 56rpx;
					border: 1px solid #FF943C;
					color: #FF943C;
					font-size: 28rpx;
					line-height: 56rpx;
					text-align: center;
					border-radius: 224rpx;
					margin-right: 48rpx;

					&:last-child {
						margin-right: 0;
					}
				}
			}
		}

		.child_management_not {
			width: 440rpx;
			height: 380rpx;
			margin: 154rpx auto 0 auto;
			display: block;
		}

		.child_management_btn {
			border-radius: 16rpx;
			background-color: #FF943C;
			color: #fff;
			width: 436rpx;
			height: 74rpx;
			line-height: 74rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			margin: 56rpx auto 0 auto;
		}
	}
</style>